<template>
  <Echarts :options="options" id="centerBottomRight"></Echarts>
</template>

<script>
import Echarts from "@/components/Echarts/index.vue";
import { reactive, watch } from "vue";

export default {
  components: {
    Echarts
  },
  props: {
    chartData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    let options = reactive({
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "horizontal"
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "50%",
          data: props.chartData,
          top: "10%",
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });
    return {
      options
    };
  }
};
</script>